<template>
  <div class="login auth">
    <div class="content">
      <h2>登录</h2>
      <!-- 邮箱输入框 -->
      <el-input v-model="user.email" placeholder="请输入邮箱" clearable class="user-input" />
      <!-- 密码输入框，带显示密码功能 -->
      <el-input v-model="user.password" placeholder="请输入密码" clearable show-password class="user-input" />
      <!-- 登录按钮 -->
      <el-button class="user-input" @click="login">登录</el-button>
      <div class="msg">
        <!-- 忘记密码跳转 -->
        <el-link underline="never" @click="toforgotpassword">已有账号，忘记密码？</el-link>
        <span>或者</span>
        <!-- 注册跳转 -->
        <el-link underline="never" @click="toRegister">没有账号？点此注册</el-link>
      </div>
    </div>
  </div>
</template>

<script setup>
// 引入样式
import '@/assets/auth.css'
// 引入 Element Plus 组件
import { ElInput, ElButton, ElLink, ElMessage } from 'element-plus'
// 引入 Vue 的响应式和路由
import { ref } from 'vue'
import { useRouter } from 'vue-router'

// 获取路由实例
const router = useRouter()

// 绑定输入框的数据
let user = ref({
  email: '',      // 用户邮箱
  password: ''    // 用户密码
})

// 点击登录按钮的方法
function login() {
  // 这里可以添加登录校验逻辑
  // ElMessage.error('Oops, this is a error message.') // 登录失败的提示
  // ElMessage({ message: 'Congrats, this is a success message.', type: 'success' }) // 登录成功的提示
  // 实现登录逻辑后跳转到仪表盘
  router.push({
    path : '/dashboard'
  })
}

// 跳转忘记密码页面的方法
function toforgotpassword() {
  router.push({
    path: '/forgot-password'
  })
}

// 跳转注册页面的方法
function toRegister() {
  router.push({
    path: '/register'
  })
}

</script>

<style scoped>
/* 底部提示信息样式 */
.msg {
  width: 80%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap
}

.msg>span {
  font-size: 16px;
  font-weight: 900;
  margin: 0px 2%;
}
</style>